<!--用户信息-包含信息更改-->
<template>
    <div style="width: 976.670px;margin: 0px auto;">
        <el-row style="border: 1px solid #EBEBEB">
            <el-col :span="12" style="font-family: large;font-size: 14px">用户设置<div class="grid-content bg-purple"></div></el-col>
            <el-col :span="12"><div  style="text-align: right"><el-button @click="HuoQuXinXi">刷新</el-button></div><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>

        <el-form ref="form" :model="form" label-width="80px">
            <div style="width: 500px;margin: 0px auto;height: 105px;">
                <div style="float:left;margin-left: 30px"><img :src="url" class="image" @click="open"></div>
                <div style="float:left;width: 300px;padding-left: 24px;margin: 38px 0px"><div @mouseover="mouseOver01"
                                                                                                        @mouseleave="mouseLeave01"
                                                                                              @click="handleClick('修改名称',MingZi)"
                                                                                              :style="active01">{{MingZi}}</div><i :class="XingBie<2?'el-icon-male':'el-icon-female'" style=";font-size: 15px ;color: #AAAAAA;height: 30px;line-height: 30px"></i></div>
            </div>
            <div style="width: 500px;margin: 0px auto;height: 45px;line-height: 15px;font-size: 15px;margin-top: 28px">
                <div style="width: 154px;float: left;font-size: 15px;height: 30px;line-height: 30px">&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-edit" style=";font-size: 15px ;color: #AAAAAA;height: 30px;line-height: 30px"></i> 个人签名：</div><div @mouseover="mouseOver02"
                                                                                                                                                                                            @mouseleave="mouseLeave02"
                                                                                                                                                                                            :style="active02" style="font-size: 5px" @click="handleClick('修改签名',QianMing)">{{QianMing}}</div>
            </div>
            <div style="width: 500px;margin: 0px auto;height: 45px;line-height: 15px;font-size: 15px;margin-top: 15px"><div style="width: 154px;float: left;font-size: 15px;height: 30px;line-height: 30px">&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-phone" style=";font-size: 15px ;color: #AAAAAA;height: 30px;line-height: 30px"></i> 手机号：</div><div @mouseover="mouseOver03"
                                                                                                                                                                                                                                                    @mouseleave="mouseLeave03"
                                                                                                                                                                                                                                                    :style="active03" @click="handleClick('修改手机号码',ShouJiHao)">{{ShouJiHao}}</div></div>
            <div style="width: 500px;margin: 0px auto;height: 45px;line-height: 15px;font-size: 15px;margin-top: 15px"><div style="width: 154px;float: left;font-size: 15px;height: 30px;line-height: 30px">&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-message" style=";font-size: 15px ;color: #AAAAAA;height: 30px;line-height: 30px"></i> 邮箱地址：</div><div @mouseover="mouseOver04"
                                                                                                                                                                                                                                                    @mouseleave="mouseLeave04"
                                                                                                                                                                                                                                                    :style="active04"  @click="handleClick('修改邮箱地址',YouXiangDiZhi)">{{YouXiangDiZhi}}</div></div>
            <div style="width: 500px;margin: 0px auto;height: 45px;line-height: 15px;font-size: 15px;margin-top: 15px"><div style="width: 154px;float: left;font-size: 15px;height: 30px;line-height: 30px">&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-lock" style=";font-size: 15px ;color: #AAAAAA;height: 30px;line-height: 30px"></i> 密码：</div><div @mouseover="mouseOver05"
                                                                                                                                                                                                                                                    @mouseleave="mouseLeave05"
                                                                                                                                                                                                                                                       :style="active05"  @click="handleClick('修改密码',MiMa)">{{MiMa}}</div></div>
            <el-upload style="display: none"
                    class="avatar-uploader" id="HuanTouXiang"
                    action="http://localhost:8081/AddAttachmentToTheOrder"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                <i v-else class="el-icon-plus avatar-uploader-icon" ref="upload"></i>
            </el-upload>
        </el-form>
        <ModifyUserInformation v-if="Visiable" ref="dialog"></ModifyUserInformation>
    </div>
</template>

<script>
    import ModifyUserInformation from "./ModifyUserInformation";
    export default {
        name: "AccountInformation",
        components:{
            ModifyUserInformation
        },
        data(){
            return{
                qrcodeSrc: require('@/assets/images/img_empty.png'),
                QianMing:"这里是签名",
                imageUrl: '',
                XingBie:0,
                MingZi:'默认名称',
                ShouJiHao:'99999999999999999',
                YouXiangDiZhi:'99999999999999999',
                MiMa:'99999999999999999',
                Visiable:false,
                url:'',
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                active01: 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px',
                active02: 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px;width:330px',
                active03: 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px',
                active04: 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px',
                active05: 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px',
            }
        },
        mounted() {
            this.HuoQuXinXi();
        }
        ,
        methods:{
            handleClick(data,user){
                this.Visiable=true;
                this.$nextTick(()=>{
                    //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
                    //init调用的是dialog-component组件里面的init方法
                    //data是传递给弹窗页面的值
                    this.$refs.dialog.init(data,user);
                })
            },
            async MingZiXiuGai() {
                this.XiuGaiMingCheng = this.MingZi;
                console.log(this.XiuGaiMingCheng)
                this.$confirm('<input v-model="'+this.XiuGaiMingCheng+'">', '修改名称', {
                    confirmButtonText: '修改头像',
                    cancelButtonText: '确定',
                    dangerouslyUseHTMLString: true,
                    // type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                    this.$refs.upload.click();
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });

                });
                let res = await this.$http.get('', {params: {}})
            }
            ,
            async HuoQuXinXi() {
                let res = await this.$http.get('GetXinXi', {
                    params: {}
                });
                this.QianMing=res.data.freestyle;
                this.ShouJiHao = res.data.phone;
                this.MingZi = res.data.trueName;
                this.XingBie = res.data.sex;
                this.YouXiangDiZhi = res.data.email;
                this.MiMa = res.data.password;
                this.url = res.data.avatar;
                if (res.data.sex == '男') {
                    this.XingBie=1;
                }else {
                    this.XingBie=2;
                }
            },
            // petImage() {
            //     var url = "http://localhost:8081/file/666TX.jpg";
            //     console.log(url);
            //     return url
            // },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                if (res.jg=="上传成功") {
                    this.$message({
                        type: 'success',
                        message: '上传成功!'
                    });
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            open() {
                this.$confirm('<img style="width: 100%" src="'+this.url+'">', '头像', {
                    confirmButtonText: '修改头像',
                    cancelButtonText: '确定',
                    dangerouslyUseHTMLString: true,
                    // type: 'warning'
                }).then(() => {
                    // this.$message({
                    //     type: 'success',
                    //     message: '删除成功!'
                    // });
                    this.$refs.upload.click();
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });

                });
            },
            ss(){
              console.log("看到没")
            },
            mouseOver01: function(){
                this.active01 = 'box-sizing: border-box;background-color: #cccccc;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            },
            mouseLeave01: function () {
                this.active01 = 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            }, mouseOver02: function(){
                this.active02 = 'box-sizing: border-box;background-color: #cccccc;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px;width:330px ';
            },
            mouseLeave02: function () {
                this.active02 = 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px;width:330px';
            }, mouseOver03: function(){
                this.active03 = 'box-sizing: border-box;background-color: #cccccc;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            },
            mouseLeave03: function () {
                this.active03 = 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            }, mouseOver04: function(){
                this.active04 = 'box-sizing: border-box;background-color: #cccccc;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            },
            mouseLeave04: function () {
                this.active04 = 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            }, mouseOver05: function(){
                this.active05 = 'box-sizing: border-box;background-color: #cccccc;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            },
            mouseLeave05: function () {
                this.active05 = 'box-sizing: border-box;border-radius:6px;float: left;padding:3px;height:30px;line-height:23.1px';
            },

        }
    }
</script>

<style scoped>
    .image{
        /*margin-top: 100px;*/
        width:100px;
        height:100px;
        border-radius:150px;
    }
    div{
        box-sizing: border-box;
        color: #606266;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>